<template>
  <div class="demo">
    <fieldset>
      <legend>配置参数</legend>
      翻页角度：<input type="number" min="1" max="89" v-model.number="angle">
      翻页时间(毫秒)：<input type="number" min="1" v-model.number="duration">
      翻页结束后消失：<input type="checkbox" v-model="autoHide">
      纸张前景色：<input type="color" v-model="foregroundColor">
      纸张前景使用图片：<input type="checkbox" v-model="checkImg">
      纸张背景色：<input type="color" v-model="backgroundColor">
      边框颜色：<input type="color" v-model="borderColor">
      边框宽度：<input type="number" min="1" v-model.number="borderWidth">
      纸张弯曲比例：<input type="number" min="0.01" max="1" v-model.number="bendRatio">
    </fieldset>
    <div style="width: 300px; position: relative; display: inline-block; border: 1px solid #000;" @click="turn1">
      <p>点击翻页</p>
      <p>点击翻页</p>
      <p>点击翻页</p>
      <p>点击翻页</p>
      <p>点击翻页</p>
      <p>点击翻页</p>
      <p>点击翻页</p>
      <yc-turnpage @mounted="init1"></yc-turnpage>
    </div>
    <div style="width: 300px; position: relative; display: inline-block; border: 1px solid #000;" @click="turn2">
      <p>点击翻页</p>
      <p>点击翻页</p>
      <p style="background-color: green;">点击翻页</p>
      <p>点击翻页</p>
      <p>点击翻页</p>
      <yc-turnpage @mounted="init2"></yc-turnpage>
    </div>
    <div style="width: 300px; position: relative; display: inline-block; border: 1px solid #000; line-height: 0; vertical-align: bottom;" @click="turn3">
      <img src="/img/20211205012822.jpg" style="max-width: 100%;">
      <yc-turnpage @mounted="init3"></yc-turnpage>
    </div>
    图片素材：<img src="/img/20211205185337.jpg" id="img" width="100" style="vertical-align: bottom;">
    <br>
    <button @click="turn1">框1翻页</button>
    <button @click="turn2">框2翻页</button>
    <button @click="turn3">框3翻页</button>
    <button @click="turn">一起翻页</button>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  name: 'turnpage',
  data () {
    return {
      angle: 30,
      duration: 1500,
      autoHide: true,
      foregroundColor: '#ffffff',
      checkImg: false,
      backgroundColor: '#eeeeee',
      borderColor: '#000000',
      borderWidth: 1,
      bendRatio: 0.1
    }
  },
  methods: {
    init1 (vm) {
      this.setImg()
      Vue.prototype.$page1 = vm
    },
    turn1 () {
      if (!this.$page1.isRunning()) {
        if (this.$page1.isClear()) {
          this.$page1.turn()
        } else {
          this.$page1.clear()
        }
      }
    },
    init2 (vm) {
      this.setImg()
      Vue.prototype.$page2 = vm
    },
    turn2 () {
      if (!this.$page2.isRunning()) {
        if (this.$page2.isClear()) {
          this.$page2.turn()
        } else {
          this.$page2.clear()
        }
      }
    },
    init3 (vm) {
      this.setImg()
      Vue.prototype.$page3 = vm
    },
    turn3 () {
      if (!this.$page3.isRunning()) {
        if (this.$page3.isClear()) {
          this.$page3.turn()
        } else {
          this.$page3.clear()
        }
      }
    },
    turn () {
      this.turn1()
      this.turn2()
      this.turn3()
    },
    setImg () {
      if (!this.img) {
        this.img = document.getElementById('img')
      }
    }
  },
  watch: {
    angle (val) {
      this.$page1.page.angle = val
      this.$page2.page.angle = val
      this.$page3.page.angle = val
    },
    duration (val) {
      this.$page1.page.duration = val
      this.$page2.page.duration = val
      this.$page3.page.duration = val
    },
    autoHide (val) {
      if (val) {
        this.$page1.page.callback = null
        this.$page2.page.callback = null
        this.$page3.page.callback = null
      } else {
        this.$page1.page.callback = () => {}
        this.$page2.page.callback = () => {}
        this.$page3.page.callback = () => {}
      }
    },
    foregroundColor (val) {
      this.$page1.page.foregroundColor = val
      this.$page2.page.foregroundColor = val
      this.$page3.page.foregroundColor = val
    },
    checkImg (val) {
      if (val) {
        this.$page1.page.backgroundImage = this.img
        this.$page2.page.backgroundImage = this.img
        this.$page3.page.backgroundImage = this.img
      } else {
        this.$page1.page.backgroundImage = null
        this.$page2.page.backgroundImage = null
        this.$page3.page.backgroundImage = null
      }
    },
    backgroundColor (val) {
      this.$page1.page.backgroundColor = val
      this.$page2.page.backgroundColor = val
      this.$page3.page.backgroundColor = val
    },
    borderColor (val) {
      this.$page1.page.borderColor = val
      this.$page2.page.borderColor = val
      this.$page3.page.borderColor = val
    },
    borderWidth (val) {
      this.$page1.page.borderWidth = val * 2
      this.$page2.page.borderWidth = val * 2
      this.$page3.page.borderWidth = val * 2
    },
    bendRatio (val) {
      this.$page1.page.bendRatio = val
      this.$page2.page.bendRatio = val
      this.$page3.page.bendRatio = val
    }
  }
}
</script>
